<template>
    <div class="commodity">
        <div class="commodity-tab" ref='commodity-tab-wrapper'>
            <div style="height:120%">
                <div class="commodity-tab-item border-bottom"
                     v-for="(item,index) of goods"
                     :key="index"
                     :class="{active:active === index}"
                      @click="toggle(index, $event)"
                     >
                    {{item.name}}
                </div>
            </div>
        </div>
        <div class="commodity-content" ref="commodity-content-wrapper">
            <div>
                <div class="commodity-content-item" v-for="(item,index) of goods" :key="index">
                    <div class="item-title" :ref='item.name'>{{item.name}}</div>
                    <div
                    class="item-info-wrapper"
                    v-for="(foods,key) of item.foods"
                    :key="key"
                    @click="showFood (foods, $event)"
                    >
                        <img :src="foods.icon" alt="">
                        <div class="item-info">
                            <p class="item--info-title">{{ foods.name }}</p>
                            <p class="item-type">{{ foods.description }}</p>
                            <span class="item-sell-count">月售{{ foods.sellCount }}碗</span>
                            <span class="item-sell-comment">好评率{{ foods.rating }}%</span>
                            <div class="item-price-wrapper">
                                <span class="item-price-now">￥{{ foods.price }}</span>
                                <span class="item-price-old">￥{{ foods.oldPrice }}</span>
                            </div>
                            <div class="add-re-wrapper">
                                <car-control :foods="foods"></car-control>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <commodity-info
        :food="food"
        ref='CommodityInfo'
        ></commodity-info>
    </div>
</template>

<script>
// 导入滚动插件
import BScroll from 'better-scroll'
// 导入axios ajax
import axios from 'axios'

// 导入加减数量按钮
import CarControl from './CarControl'
import CommodityInfo from './CommodityInfo'
export default {
  name: 'Commodity',
  data () {
    return {
      goods: '',
      active: 0,
      food: ''
    }
  },
  components: {
    CarControl,
    CommodityInfo
  },
  methods: {
    getGoodsInfo () {
      // 获取goods数据
      axios.get('/api/goods').then((response) => {
        if (response.data.erron === 0) {
          let data = ''
          data = response.data.data
          this.goods = data
          this.goods.forEach((element, key) => {
            element.foods.forEach((i, index) => {
              i.id = '0' + index + key
              this.$set(i, 'count', 0)
            })
          })
        }
      })
    },
    // 点击切换tab
    toggle (i, e) {
      this.active = i
      const word = e.target.innerText
      this.commodityContentScroll.scrollToElement(this.$refs[word][0])
    },
    showFood (food, e) {
      this.food = food
      this.$refs.CommodityInfo.show()
    },
    initializeScroll () {
      this.$nextTick(() => {
        if (!this.commodityTabScroll && !this.commodityContentScroll) {
          this.commodityTabScroll = new BScroll(this.$refs['commodity-tab-wrapper'], {
            click: true
          })
          this.commodityContentScroll = new BScroll(this.$refs['commodity-content-wrapper'], {
            click: true
          })
        } else {
          this.commodityTabScroll.refresh()
          this.commodityTabScroll.refresh()
        }
      })
    }
  },
  computed: {
  },
  mounted () {
    this.commodityTabScroll = new BScroll(this.$refs['commodity-tab-wrapper'], {
      click: true
    })
    this.commodityContentScroll = new BScroll(this.$refs['commodity-content-wrapper'], {
      click: true
    })
    this.initializeScroll()
    // 获取goods信息
    this.getGoodsInfo()
  },
  watch: {
  }
}
</script>

<style lang="stylus" scoped>
.border-bottom::before{
    width 1.12rem
    border-color rgba(7,17,27,.2)
    left 50%
    margin-left -.56rem
}
.commodity{
    overflow hidden
    display flex
    height 100%
    .commodity-tab{
        display flex
        height 100%
        flex-direction:column
        background-color #f3f5f7
        overflow hidden
        .commodity-tab-item{
            display flex
            flex-direction column
            justify-content center
            width 1.6rem
            height 11.1%
            text-align center
            color rgb(24,20,20)
            font-size .24rem
            font-weight 200
        }
        .active{
            background #fff
        }
    }
    .commodity-content{
        height 0
        height 100%
        overflow hidden
        flex 1
        .commodity-content-item{
            .item-title{
                border-left .1rem solid #d9dde1
                border-bottom .01rem solid #d9dde1
                height .52rem
                line-height .52rem
                font-size .24rem
                color rgb(147,153,159)
                padding-left .28rem
                background #f3f5f7
            }
            .item-info-wrapper{
                display flex
                margin-top .36rem
                padding 0 .36rem
                border-bottom .01rem solid rgba(7,17,27,.1)
                img{
                    border-radius .03rem
                    width 1.44rem
                    height 1.44rem

                }
                .item-info{
                    position relative
                    flex 1
                    margin-left .2rem
                    margin-top .04rem
                    .item--info-title{
                        font-size .28rem
                        color rgb(7,17,27)
                        line-height .28rem
                    }
                    .item-type{
                        font-size .2rem
                        color rgb(147,153,159)
                        line-height .3rem
                        margin-top .16rem
                        margin-bottom  .16rem
                    }
                    .item-sell-count{
                        font-size .2rem
                        color rgb(147,153,159)
                        line-height .2rem
                    }
                    .item-sell-comment{
                        font-size .2rem
                        color rgb(147,153,159)
                        line-height .2rem
                        margin-left .24rem
                    }
                    .item-price-wrapper{
                        margin-top .16rem
                        margin-bottom .36rem
                        .item-price-now{
                        font-size .28rem
                        color rgb(240,20,20)
                        font-weight 700
                        line-height .48rem
                        vertical-align middle
                        }
                        .item-price-old{
                        font-size .2rem
                        font-weight 700
                        color rgb(147,153,159)
                        line-height .48rem
                        vertical-align middle
                        text-decoration line-through
                        margin-left .16rem
                        }
                    }
                    .add-re-wrapper{
                        position absolute
                        bottom .36rem
                        right 0
                        font-size .48rem
                        color rgb(0,160,220)
                    }
                }
            }
            .item-info-wrapper:last-child{
                border none
            }
        }
    }
}

</style>
